<template>
  <view class="container-ranking">
    <image
      :src="backImage"
      mode="aspectFit"
    />
    <text :class="{white:ranking <=3 }">{{ranking}}</text>
    
  </view>
</template>

<script>
  import rankIconOther from '../../static/images/ranking-other.png'
  import rankIcon1 from '../../static/images/ranking-1.png'
  import rankIcon2 from '../../static/images/ranking-2.png'
  import rankIcon3 from '../../static/images/ranking-3.png'
  export default {
    name:"hotRanking",
    data() {
      return {
        
      };
    },
    props:{
      ranking:{
        type:Number,
        required:true
      }
    },
    methods:{
      rankIcon(index){ return new URL(`../../static/images/ranking-${index}.png`, import.meta.url).href}
    },
    computed:{
      backImage(){
        // if(this.ranking<=3){
        //   return require(`../../static/images/ranking-${this.ranking}.png`)
        // }
        if(this.ranking===1){
          return rankIcon1
        }else if(this.ranking===2){
          return rankIcon2
        }else if(this.ranking===3){
          return rankIcon3
        }
        return rankIconOther
      }
    }
  }
</script>

<style lang="scss" scoped>
.container-ranking{
  width: 20px;
  height: 18px;
  position: relative;
  text-align: center;
  image{
    width: 100%;
    height:100%
  }
  text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%,-55%);
    color: black;
    font-size:12px;
    font-weight: 600;
  }
  .white{
    color: white;
  }
}

</style>